<template>
    <el-dialog
        :title="isLogistics?'核对信息':title"
        :visible.sync="isShow"
        width="70%">
        <!-- <template v-if="orderDetailData">
            <div class="detailTopItem">支付金额：{{ orderDetailData.payAmount }}</div>
            <template v-if="orderDetailData.payStatus=='1'">
            <div class="detailTopItem">流水号：{{ orderDetailData.outTradeNo }}</div>
            <div class="detailTopItem">交易单号：{{ orderDetailData.transactionId }}</div>
            <div class="detailTopItem">交易时间：{{ orderDetailData.payAt }}</div>
            <div class="detailTopItem">寄送至：{{ orderDetailData.tbAddressManagementDto.address+orderDetailData.tbAddressManagementDto.detailedAddress }}</div>
            <div class="detailTopItem">收件人：{{ orderDetailData.tbAddressManagementDto.userName+orderDetailData.tbAddressManagementDto.phoneNumber }}</div>
            </template>
            
            <div style="height: 40px;margin-left: 15px;" :class="['payStatus','sel']" v-if="orderDetailData.payStatus=='1'">交易状态：{{ '已支付' }}</div>
            <div style="height: 40px;line-height: 40px;margin-bottom: 10px;" :class="['payStatus',orderDetailData.payStatus=='1'?'sel':'']" v-else>
                交易状态：{{ orderDetailData.payStatus=='1'?'已支付':'未支付' }}
            </div>
        </template> -->
        <el-form ref="form" :model="form" label-width="100px" class="topForm"  v-if="orderDetailData">
            <el-form-item label="支付金额：">
                <span>{{ orderDetailData.payAmount }}</span>
            </el-form-item>
            <el-form-item label="流水号：" v-if="orderDetailData.outTradeNo">
                <span>{{ orderDetailData.outTradeNo }}</span>
            </el-form-item>
            <el-form-item label="交易单号：" v-if="orderDetailData.transactionId">
                <span>{{ orderDetailData.transactionId }}</span>
            </el-form-item>
            <el-form-item label="交易时间：" v-if="orderDetailData.payAt">
                <span>{{ orderDetailData.payAt }}</span>
            </el-form-item>
            <el-form-item label="寄送至：" v-if="orderDetailData.tbAddressManagementDto">
                <span>{{ orderDetailData.tbAddressManagementDto.address+orderDetailData.tbAddressManagementDto.detailedAddress }}</span>
            </el-form-item>
            <el-form-item label="收件人：" v-if="orderDetailData.tbAddressManagementDto">
                <span>{{ orderDetailData.tbAddressManagementDto.userName+orderDetailData.tbAddressManagementDto.phoneNumber }}</span>
            </el-form-item>
            <el-form-item label="交易状态：">
                <span :class="['payStatus',orderDetailData.payStatus=='1'?'sel':'nor']">{{ orderDetailData.payStatus=='1'?'已支付':'未支付' }}</span>
            </el-form-item>
            <el-form-item label="填写物流号" v-if="isLogistics">
                <el-input v-model="form.expressNum" clearable></el-input>
            </el-form-item>
        </el-form>
        
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column label="序号" type="index" width="100" align="center"/>
            <el-table-column prop="url" label="商品图片" align="center" width="120">
            <template #default="scope">
                <template v-if="scope.row.goodsFileDtos != undefined && scope.row.goodsFileDtos.length>0">
                <el-badge :value="scope.row.goodsFileDtos.length" class="item">
                    <el-image
                style="width: 60px; height: 60px"
                :src="scope.row.goodsFileDtos[0].fileUrl"
                fit="fill"></el-image>
                </el-badge>
                </template>
            </template>
            </el-table-column>
            <el-table-column prop="goodsName" label="产品名称" align="center"/>
            <el-table-column prop="goodsNum" label="产品数量" align="center" width="120"/>
            <el-table-column prop="platformPrice" label="商品价格" align="center" width="120"/>
            <el-table-column prop="finalPrice" label="成交金额" align="center" width="120"/>
        </el-table>

        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitHandle" v-if="isLogistics" :loading="isSubmit">提 交</el-button>

            <el-button @click="isShow = false" v-else>关闭</el-button>
            
        </span>
    </el-dialog>
</template>

<script>
    import product from '@/api/product/product'
    export default {
        name: 'OrderDetailDialog',
        props: {
            title: {
                type: String,
                default:'订单详情'
            },
            // orderId: {
            //     type: String,
            //     default:''
            // },
        },
        data () {
            return {
                isShow: false,
                orderId: '',
                orderDetailData:{},
                tableData:[],
                form:{
                    expressNum:''
                },
                isLogistics:false,//是否填写物流
                isSubmit : false
            }
        },
        methods: {

            getTbMallOrdersById(){
                product.getTbMallOrdersById({id:this.orderId}).then((res) => {
                    this.orderDetailData = res;
                    this.tableData = this.orderDetailData.tbOrderGoodsList;
                }).catch(() => {

                })
            },

            submitHandle(){
                if (this.form.expressNum == undefined || this.form.expressNum == null || this.form.expressNum.trim().length==0) {
                    this.$notify({ title: '请填写物流号', type: 'warning'});
                    return;
                }
                var params = {
                    orderId:this.orderId,
                    expressNum: this.form.expressNum,
                };
                this.isSubmit = true;
                product.saveOrderExpress(params).then((res) => {
                    this.isSubmit = false;
                    this.isShow = false;
                    this.$notify({ title: '操作成功', type: 'success'});
                    this.$emit("submitSuccess");
                }).catch(() => {

                })
                
            }
        }
    }
</script>

<style lang="scss" scoped>
  $spinnerColor:#6369D8;

  .sel{
    color: $spinnerColor;
  }
  .nor{
    color: red;
  }
.detailTopItem{
  height: 30px;
  color: black;
  margin-left: 15px;
}

.item {
    margin-top: 10px;
    margin-right: 10px;
}
.topForm>.el-form-item {
    //   display: flex;
    //   --font-size: 14px;
      margin-bottom: 10px;
  }
</style>